<template>
	<div class="model facility" v-show="show">
		<h2>汇款到商家<span class="close" @click="close">&times;</span></h2>
		<div class="model_facility" v-loading="!finance">
			<div v-for="(value, key, index) in finance.money">
				<div v-if="value > 0" class="list">
					<span style="width: 100px;display: inline-block;">{{index + 1}}月份欠款:</span>
					<span style="color: #f50;width: 60px;display: inline-block;">{{value}}元</span>
				</div>
			</div>
			<div style="display: inline-block;width: 80%;margin-left: 20px;">
				<el-input placeholder="汇款金额" v-model="money">
					<template slot="append" ><div @click="sendMoney">一键汇款</div></template>
				</el-input>
			</div>
			<div style="width: 60%;margin: 10px auto;text-align: center;">
				<el-button type="success" @click="sendMsg">同意汇款</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["finance"],
		data() {
			return {
				money: "",
				sum: 0
			}
		},
		methods: {
			close() {
				this.$parent.isShow = false;
				this.$parent.finance = "";
			},
			sendMoney() {
				this.sum = 0;
				for( var i in this.finance.money ) {
					this.sum += this.finance.money[i];
				}
				this.money = this.sum;
				
			},
			sendMsg() {
				this.sum = 0;
				
				if ( Number(this.money) !== Number(this.money) ) {
					this.$message({
						message: "请输入合法数字!!!",
						type: "warning"
					});
					return;
				}
				for( var i in this.finance.money ) {
					this.sum += this.finance.money[i];
				}
				if (this.money > this.sum) {
					this.$message({
						message: "汇款金额查过欠款数额!!!",
						type: "warning"
					});
					return;
				}
				this.$parent.isShow = false;
				this.$parent.finance = "";
				this.$parent.loading = true;
				var info = {
					id: this.finance.id,
					money: this.money
				}
				this.$http.post("/api/remit", info).then((res)=>{
					this.$parent.tableData = res.data.slice(0,10);
					this.$parent.tableDataCopy = res.data;
					this.$parent.loading = false;
					this.$parent.totalNum = this.$parent.tableDataCopy.length;
				});
				
			}
		},
		computed: {
			show() {
				return this.$parent.isShow;
			}
		}
	}
</script>

<style scoped>
	/*模态框*/
	
	.list {
		font-size: 16px;
		color: #444;
		margin-bottom: 10px;
	}
	
	.list span {
		font-size: 14px;
		margin-left: 10px;
	}
	
	.model {
		width: 500px;
		height: 400px;
		border: 1px solid #f6f6f6;
		background: #fff;
		margin: 0 auto;
		position: absolute;
		top: calc( (100% - 400px)/2);
		left: calc( (100% - 500px)/2);
		z-index: 999;
		transition: all 1s;
		box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
		border-radius: 5px;
		animation: eject .5s;
		/*display: none;*/
	}
	
	@keyframes eject {
		0% {
			opacity: 0;
			transform: scale(.3);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	.model>h2 {
		vertical-align: middle;
		padding: 1rem 0 1rem 2rem;
		background: #f6f6f6;
		font-weight: normal;
	}
	
	.model .close {
		float: right;
		margin-right: 1rem;
		cursor: pointer;
		font-size: 1.5rem;
	}
	
	.model .close:hover {
		color: #666;
	}
	
	.model>div {
		padding: 2rem;
	}
	/*详细设施查看*/
	
	.model_facility {
		padding: .1rem;
		min-height: 300px;
	}
	
	.model_facility .pics {
		width: 90%;
		margin: auto;
		max-height: 300px;
		overflow-y: auto;
	}
	
	.model_facility .pics img {
		width: 100%;
		height: 200px;
	}
	
	.model_facility .pics img:not(:first-of-type) {
		margin-top: 2rem;
	}
</style>